<template>
  <div class="more-content" :style="{'overflow-y': 'auto'}">
    <div v-for="(item, index) in listData" :key="index" class="demand-content">
      <div class="demand-top">
        <div class="top-left">
          <div>{{ item.taskName }}</div>
        </div>
        <div class="top-right">
          <img src="../../../../../static/project/cz.png" alt="" @click="detailTask(item)" />
          <img src="../../../../../static/project/five.png" alt="" @click="delLiChengClick(item.id)" />
        </div>
      </div>
      <div class="demand-more">
        <div>负责人</div>
        <div>{{ item.name }}</div>
      </div>
      <div class="demand-more">
        <div>任务描述</div>
        <div v-if="item.taskDesc == null || item.taskDesc == ''">
          --
        </div>
        <div v-else>
          {{ item.taskDesc }}
        </div>
      </div>
      <div class="demand-more">
        <div>任务来源</div>
        <div v-if="item.taskType == null || item.taskType == ''">
          --
        </div>
        <div v-else>
          {{ item.taskType=='1'?'项目':'需求' }}
        </div>
      </div>
      <div class="demand-more">
        <div>开始时间</div>
        <div v-if="item.startTime == null || item.startTime == ''">
          --
        </div>
        <div v-else>
          {{ item.startTime | timeFormat }}
        </div>
      </div>
      <div class="demand-more">
        <div>结束时间</div>
        <div v-if="item.endTime == null || item.endTime == ''"></div>
        <div v-else>
          {{ item.endTime | timeFormat }}
        </div>
      </div>
      <div class="demand-more2">
        <div>任务状态</div>
        <view v-if="item.taskStatus == 'wait'" class="status">
          <view class="status-color" />
          <view class="font-color">
            未开始
          </view>
        </view>
        <view v-else-if="item.taskStatus == 'doing'" class="status">
          <view class="status-colorTwo" />
          <view class="font-colorTwo">
            进行中
          </view>
        </view>
        <view v-else-if="iitem.taskStatus == 'suspend'" class="status">
          <view class="status-colorThree" />
          <view class="font-colorThree">
            已挂起
          </view>
        </view>
        <view v-else class="status">
          <view class="status-colorFourth" />
          <view class="font-colorFourth">
            已关闭
          </view>
        </view>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTimestamp } from '@/utils/format'
import { getDeviceInfo } from '@/utils/storage'
import { showConfirm } from '@/utils/common'
import { deleteTask } from '@/apis/project'
export default {
  filters: {
    timeFormat(value) {
      return formatTimestamp(value)
    },
  },
  props: {
    listData: {
      type: Array,
    },
  },
  data() {
    return {
      lcHeight: 0,
    }
  },
  created() {
    this.setHeight()
  },
  methods: {
    detailTask(item) {
      uni.navigateTo({
        url: `/pages/index/tabs/overview/task-detail?param=${encodeURIComponent(JSON.stringify(item))}`,
      })
    },
    // 删除按钮点击
    delLiChengClick(id) {
      showConfirm('确认删除该任务?').then(() => {
        this.delLiChengFunc(id)
      })
    },
    async delLiChengFunc(id) {
      const res = await deleteTask(id)
      if (res) {
        this.$emit('getRequire')
        uni.showToast({
          title: '删除成功!',
          icon: 'success',
          duration: 1700,
        })
      }
    },
    setHeight() {
      const { screenHeight, statusBarHeight, navbarHeight } = getDeviceInfo()
      this.lcHeight = screenHeight - statusBarHeight - navbarHeight - 100
    },
  },
}
</script>
<style lang="scss" scoped>
.more-content {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding-top: 10px;
  // padding-bottom: 200px;
  // height: 700px;
  // overflow-y: auto;
  // margin-bottom: 200px;
  .demand-content {
    margin-bottom: 10px;
    width: 93%;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    padding-bottom: 1px;
    .demand-top {
      padding: 15px 10px 0px 10px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .top-left {
        display: flex;
        div:nth-child(1) {
          font-size: 16px;
          color: #333;
          font-weight: 600;
          margin-right: 15px;
        }
        div:nth-child(2) {
          border-radius: 2px;
          font-size: 14px;
          padding: 0px 5px;
        }
        .incomplete {
          background: #ffe5e5;
          border: 1px solid #ff0000;
          color: #ff0000;
        }
        .instart {
          background: rgba(115, 158, 202, 0.1);
          border: 1px solid #739eca;
          color: #739eca;
        }
        .start {
          background: #e5f9ef;
          border: 1px solid #04cb64;
          color: #04cb64;
        }
        .close {
          background: #e6e6e6;
          border: 1px solid #acacac;
          color: #999;
        }
      }
      .top-right {
        display: flex;
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
    .demand-more {
      margin-bottom: 10px;
      padding: 0px 10px 0px 10px;
      display: flex;
      justify-content: space-between;
    }
    .demand-more2 {
      display: flex;
      justify-content: space-between;
      // line-height: 26px;
      margin-bottom: 10px;
      padding: 0px 10px 0px 10px;
      .status {
        display: flex;
        flex-direction: row;
        align-items: center;
        .status-color {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #cccccc;
        }
        .font-color {
          margin-left: 6px;
          color: #cccccc;
          font-weight: 550;
        }
        .status-colorTwo {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #739eca;
        }
        .font-colorTwo {
          margin-left: 6px;
          color: #739eca;
          font-weight: 550;
        }
        .status-colorThree {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #04cb64;
        }
        .font-colorThree {
          margin-left: 6px;
          color: #04cb64;
          font-weight: 550;
        }
        .status-colorFourth {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #999;
        }
        .font-colorFourth {
          margin-left: 6px;
          color: #999;
          font-weight: 550;
        }
      }
    }
    .content-more {
      display: flex;
      justify-content: space-between;
      padding: 0px 10px 0px 10px;
      .more-progress {
        display: flex;
        width: 90%;
        justify-content: space-between;
        align-items: center;
        van-progress {
          width: 85%;
        }
      }
    }
  }
}
</style>
<style lang="scss">
	.load-more text{
		// padding-bottom: 15px;
	}
</style>
